<template>
  <div class="citylist-page">
    <van-nav-bar
      class="collectTop"
      title="城市列表"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-index-bar>
      <van-index-anchor index="当前城市" />
      <van-cell title="上海" />
      <!--  -->
      <van-index-anchor index="热门城市" />
      <van-cell :title="item.label" v-for="(item ,index) in hotlist" :key="index"/>
      </van-index-bar>
      <!-- 所有城市 -->
      <van-index-bar>
      <div v-for="item,index in AtoZCityList" :key="index">
      <van-index-anchor :index="item.AtoZList" />
      <van-cell :title =" item.cityClass.length ? v : '暂无城市'"  v-for="(v,k) in item.cityClass" :key="k"/>
      </div>
    </van-index-bar>
  </div>
</template>

<script>
import { getCityList, getHotCity } from '@/api/rentinfo'
export default {
  name: 'citylist-page',
  data () {
    return {
      AtoZ: [
        'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
      ],
      hotlist: [],
      citylist: [],
      AtoZCityList: []
    }
  },
  async created () {
    // 获取热门城市并渲染
    const res = await getHotCity()
    // console.log(res.body)
    this.hotlist = res.body
    // 获取所有城市列表
    const { body } = await getCityList()
    // console.log(body)
    this.citylist = body
    const AtoZCity = this.AtoZ.map(item => {
      return {
        AtoZList: item,
        cityClass: this.citylist.filter(v => {
          return v.pinyin[0].toUpperCase() === item
        }).map(item => {
          return item.label
        })
      }
    })
    this.AtoZCityList = AtoZCity
    console.log(this.AtoZCityList)
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    }
  }
}
</script>

<style>
.collectTop {
  background-color: #1cb676;
}
</style>
